<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>${dep}到${arr}火车票预订。。。。。。</title>

    <jsp:include page="common/common.jsp" />

    <script>
        function getPassStation(vehicleNo) {
            $.ajax({
                url: ["/pass_station?vehicleNo=", vehicleNo].join(""),
                success:function (data, status, xhr) {
                    console.log(data);
                    var html = "";
                    for (var i = 0; i < data.data.length; i++) {
                        html += "<tr>\n" +
                            "   <td>" + data.data[i].seq + "</td>\n" +
                            "   <td>" + data.data[i].stationName + "</td>\n" +
                            "   <td>" + data.data[i].arrTime + "</td>\n" +
                            "   <td>" + data.data[i].depTime + "</td>\n" +
                            "   <td>" + (data.data[i].stopTime == 0 ? "--:--" : data.data[i].stopTime) + "</td>\n" +
                            "</tr>"
                    }

                    $("#modalTbody").empty();  // 清除modalTbody对应节点的子元素

                    $("#modalTbody").append(html); // 追加子元素
                }
            });
        }

        /**
         * 创建订单
         */
        function create_order(arrStation, depStation) {
            $.post("","") // TODO
        }
    </script>
    <style>
        td{
            padding: 10px 20px;
        }
    </style>
</head>
<body>
<div><a href="/login">登录</a> </div>
<table class="table table-hover">
    <c:forEach items="${vehicleModels}" var="item">
        <tr>
            <td>
                ${item.vehicleNo}<br/>
                <c:choose>
                    <c:when test="${item.category == 1}">高铁</c:when>
                    <c:when test="${item.category == 2}">新空快速</c:when>
                </c:choose>
                    <button onclick="getPassStation('${item.vehicleNo}')" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">经停</button>
            </td>
            <td>
                    ${item.depTime}<br/>${item.depStationName}
            </td>
            <td>
                    ${item.arrTime}-${item.depTime}
            </td>
            <td>
                    ${item.arrTime}<br/>${item.arrStationName}
            </td>
            <td>
                    ${item.mileage}<br/>
            </td>
            <td>
                    <a href="/${type}/to_open_order?depDate=${item.depDate}&id=${item.id}&vehicleNo=${item.vehicleNo}&arrStation=${item.arrStation}&depStation=${item.depStation}&depTime=${item.depTime}&depStationName=${item.depStationName}&arrTime=${item.arrTime}&arrStationName=${item.arrStationName}&mileage=${item.mileage}&category=${item.category}">预订</a><br/>
            </td>
        </tr>

    </c:forEach>
</table>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel"><span id="vehicleNo"></span>的经停站</h4>
            </div>
            <div class="modal-body">
                <table>
                    <thead>
                        <td>站次</td>
                        <td>站名</td>
                        <td>到站时间</td>
                        <td>出发时间</td>
                        <td>停留时间</td>
                    </thead>
                    <tbody id="modalTbody">
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>
